<template>
	<view class="tn-flex tn-flex-column">
		<tn-sticky class="tn-white_bg">
			<tn-subsection v-model="subsectionValue" @change="changeSubsection">
				<tn-subsection-item title="日账单" />
				<tn-subsection-item title="月账单" />
			</tn-subsection>
		</tn-sticky>
		<view class="tn-pl-sm tn-pr-sm">
			<loading v-if="isLoading" style="height: 70vh;"></loading>
			<view class="empty" v-else-if="financeList.length==0">
				<image
					src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
					mode="widthFix"></image>
				<text>这里空空荡荡，啥也没有留下</text>
			</view>
			<view v-else>
				<view class="tn-radius card_item tn-mt-lg tn-p-sm tn-w-full" style="margin-bottom: 50rpx;"
					v-for="item in financeList" :key="item.id">
					<view class="tn-flex items-center justify-between gap-2">
						<view class="tn-flex items-center tn-flex-1">
							<tn-title :title="item.bill_date" mode="hLine" assist-color="tn-blue" size="lg" />
						</view>
					</view>
					<view class="tn-flex tn-flex-column justify-around tn-mt-sm">
						<zb-table :show-header="true" :columns="column" :stripe="true" :data="[{
							cop_quota_amount:item.cop_quota_amount,
							 cop_price_amount:item.cop_price_amount,
							 cop_expect_profit:item.cop_expect_profit, 
							 cop_finish_profit:item.cop_finish_profit,
							 cop_write_quota:item.cop_write_quota, 
							 cop_wait_write_quota:item.cop_wait_write_quota, 
							 cop_refund_quota:item.cop_refund_quota,
							 cop_refund_price:item.cop_refund_price, 
							 cop_sell_price:item.cop_sell_price, 
							 gos_sell_amount:item.gos_sell_amount,
							 gos_sell_finish:item.gos_sell_finish, 
							 cash_apply_amount:item.cash_apply_amount, 
							 cash_price_amount:item.cash_price_amount,
							 cash_profit_amount:item.cash_profit_amount, 
							 cash_finish_price:item.cash_finish_price, 
							 cash_finish_profit:item.cash_finish_profit,
							 cmb_sell_amount:item.cmb_sell_amount, 
							 cmb_plat_amount:item.cmb_plat_amount, 
							 cmb_write_amount:item.cmb_write_amount,
							 cmb_refund_amount:item.cmb_refund_amount, 
							 cmb_expire_amount:item.cmb_expire_amount, 
							 cmb_surplus_price:item.cmb_surplus_price,
							 cmb_sell_price:item.cmb_sell_price }]">
						</zb-table>
					</view>
				</view>
				<view class="tn-pt-sm tn-pb-sm tn-flex-center">
					<uni-pagination :total="total" :current="params.page" :pageSize="params.limit"
						@change="changePage" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
	} from 'vue'
	import {
		getSysFinanceListApi,
	} from "@/request/worktop/system.js"

	onMounted(() => {
		getSysFinanceList()
	})

	const userTableData = ref([])
	const column = ref([{
		name: 'cop_quota_amount',
		label: '卖券总额度',
		align: 'left'
	}, {
		name: 'cop_price_amount',
		label: '卖券总金额',
		align: 'left'
	}, {
		name: 'cop_expect_profit',
		label: '卖券预计利润',
		align: 'left'
	}, {
		name: 'cop_finish_profit',
		label: '卖券已完成利润',
		align: 'left',
		width: 120
	}, {
		name: 'cop_write_quota',
		label: '已核销总额度',
		align: 'left'
	}, {
		name: 'cop_wait_write_quota',
		label: '所有待核销额度',
		align: 'left',
		width: 120
	}, {
		name: 'cop_refund_quota',
		label: '退款总额度',
		align: 'left'
	}, {
		name: 'cop_refund_price',
		label: '退款总金额',
		align: 'left'
	}, {
		name: 'cop_sell_price',
		label: '实际售卖金额',
		align: 'left'
	}, {
		name: 'gos_sell_amount',
		label: '卖货下单金额',
		align: 'left'
	}, {
		name: 'gos_sell_finish',
		label: '卖货完成金额',
		align: 'left'
	}, {
		name: 'cash_apply_amount',
		label: '提现申请总金额',
		align: 'left',
		width: 120
	}, {
		name: 'cash_price_amount',
		label: '提现申请应打款金额',
		align: 'left',
		width: 140
	}, {
		name: 'cash_profit_amount',
		label: '提现申请预计利润',
		align: 'left',
		width: 140
	}, {
		name: 'cash_finish_price',
		label: '提现完成打款金额',
		align: 'left',
		width: 140
	}, {
		name: 'cash_finish_profit',
		label: '提现完成打款利润',
		align: 'left',
		width: 140
	}, {
		name: 'cmb_sell_amount',
		label: '套餐券售卖总金额',
		align: 'left',
		width: 140
	}, {
		name: 'cmb_plat_amount',
		label: '套餐券平台奖励',
		align: 'left',
		width: 120
	}, {
		name: 'cmb_write_amount',
		label: '套餐券核销',
		align: 'left'
	}, {
		name: 'cmb_refund_amount',
		label: '套餐券退款',
		align: 'left'
	}, {
		name: 'cmb_expire_amount',
		label: '套餐券过期退款',
		align: 'left',
		width: 120
	}, {
		name: 'cmb_surplus_price',
		label: '套餐券未使用',
		align: 'left'
	}, {
		name: 'cmb_sell_price',
		label: '套餐券营销',
		align: 'left'
	}])

	const isLoading = ref(true)

	const subsectionValue = ref(0)

	const financeList = ref([])
	const params = ref({
		page: 1,
		limit: 10,
		type: 1
	})
	const total = ref(0)

	// 获取账单列表
	const getSysFinanceList = () => {
		isLoading.value = true
		getSysFinanceListApi(params.value).then(res => {
			if (res.code == 0) {
				financeList.value = res.data
				total.value = res.other.total
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		}).finally(() => {
			setTimeout(() => {
				isLoading.value = false
			}, 500)
		})
	}
	// 更新页码
	const changePage = (e) => {
		params.value.page = e.current
		getSysFinanceList()
	}
	// 切换标题
	const changeSubsection = (index) => {
		params.value.page = 1
		params.value.type = index == 0 ? 1 : 3
		getSysFinanceList()
	}
</script>

<style scoped lang="scss">
</style>